<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue的响应式</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="app">{{message}}</div>

        <div id="app-2">
            <span v-bind:title="message">
               app2-- 鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
        </div>

        <div id="app-3">
            <p v-if="seen">app3--现在你看到我了</p>
        </div>

        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>

        <div id="app-5">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>

        <div id="app-6">
            <p>{{ message }}</p>
            <input v-model="message">
        </div>
        <script>
            // console.log(Vue.version);查看版本，也可以去文件中收搜


            //创建一个vue的实例,并赋值给app，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制
            let app=new Vue({
                el:"#app",
                data:{
                    message:"app--Hello Vue!"
                }
            })  
            //打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。


            var app2 = new Vue({
                el: '#app-2',
                data: {
                    message: '页面加载于 ' + new Date().toLocaleString()
                }
            })
            //JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新


            /* 下面都可以在JavaScript控制台进行更改:体验响应式吧！！！ */
            var app3 = new Vue({
              el: '#app-3',
              data: {
                seen: true
              }
            })

            var app4 = new Vue({
              el: '#app-4',
              data: {
                todos: [
                  { text: '学习 JavaScript' },
                  { text: '学习 Vue' },
                  { text: '整个牛项目' }
                ]
              }
            })

            var app5 = new Vue({
              el: '#app-5',
              data: {
                message: 'Hello Vue.js!'
              },
              methods: {
                reverseMessage: function () {
                  this.message = this.message.split('').reverse().join('')
                }
              }
            })
            3354260065
            var app6 = new Vue({
              el: '#app-6',
              data: {
                message: 'Hello Vue!'
              }
            })
    </script>
    </body>
</html>